<template>
	<view class="merchant-body">
		<view class="merchant-main">
			<image class="merchant-avatar" :src="merchantData.logo"></image>
			<text class="merchant-title">{{merchantData.name}}</text>
		</view>
		<!-- <image v-if="merchantData.post" style="width: 100%;" mode="widthFix" :src="merchantData.post" /> -->
		<view class="">
			<view class="title">
				机构简介
			</view>
			<view class="merchant-description">
				<rich-text :nodes="merchantData.description"></rich-text>
			</view>
		</view>
		<view class="merchant-area">
			<view class="merchant-area-num">
				<text>机构面积：</text>
				<text v-if="merchantData.merchant_area"> {{merchantData.merchant_area}}平方</text>
				<text v-else>待用户填写</text>
			</view>
			<view>
				<text>诊室：</text>
				<text v-if="merchantData.merchant_room_num"> {{merchantData.merchant_room_num}}间</text>
				<text v-else>待用户填写</text>
			</view>
		</view>
		<view class="license-wrapper">
			<view class="title">
				医疗职业许可证
			</view>
			<view>
				<image @click="commonPreview(parseData(merchantData.medical_info).medical_license_pic)"
					style="width: 100%;" mode="widthFix"
					:src="parseData(merchantData.medical_info).medical_license_pic">
				</image>
			</view>
		</view>
		<view v-if="merchantData.auth_info">
			<view class="title">
				厂家认证/品牌授权
			</view>
			<view class="auth-wrapper">
				<view class="auth-item" v-for="(item,index) in parseData(merchantData.auth_info)">
					<image @click="previewAuthImg(parseData(merchantData.auth_info),index)" class="auth-image"
						mode="aspectFit" :src="item.pic"></image>
					<text class="auth-name">{{item.name}}</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getMerchant
	} from "@/api/merchant";
	import {
		parseData
	} from "@/utils/convert-data";
	import PageExposure from "@/mixins/page_exposure.js"

	export default {
		mixins: [PageExposure],
		data() {
			return {
				merchantData: {}
			}
		},
		onLoad(options) {
			this.getMerchantData({
				id: options.id,
				page: 1,
				pagesize: 1
			})
		},
		methods: {
			async getMerchantData(params) {
				const data = await getMerchant(params);
				this.merchantData = data[0]
			},
			parseData: parseData,
			commonPreview(url) {
				const sources = [{
					url: url,
					type: "image"
				}]
				this.previewImg(sources, 0)
			},
			previewAuthImg(urls, current) {
				const sources = urls.map(item => {
					return {
						url: item.pic,
						type: "image"
					}
				})
				this.previewImg(sources, current)
			},
			previewImg(sources, current) {
				wx.previewMedia({
					sources: sources,
					current: 0
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.merchant-body {
		padding: 12rpx 28rpx 0;
	}

	.merchant-main {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.merchant-avatar {
		width: 104rpx;
		height: 104rpx;
		border-radius: 50%;
		margin-right: 18rpx;
	}

	.merchant-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.title {
		font-size: 28rpx;
		font-weight: bold;
		line-height: 88rpx;
	}

	.merchant-description {
		font-size: 28rpx;
		color: #000;
		line-height: 40rpx;
	}

	.merchant-area {
		padding: 28rpx 0;
		border-top: 2rpx solid #eee;
		border-bottom: 2rpx solid #eee;
		margin: 28rpx 0 0;
		display: flex;
		align-items: center;
		color: #000000;
		font-size: 28rpx;
		line-height: 40rpx;
		font-weight: 400;
	}

	.merchant-area-num {
		width: 50%;
	}

	.auth-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.auth-image {
			width: 336rpx;
			height: 190rpx;
		}

		.auth-item {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.auth-name {
			font-size: 28rpx;
			line-height: 40rpx;
			margin: 14rpx 0 34rpx;
			color: #000
		}
	}

	.license-wrapper {
		padding-bottom: 32rpx;
		border-bottom: 2rpx solid #eee;
	}
</style>